<template>
    <div class="md:max-w-[1200px] mx-auto">
        <Title :title="title" :content="content" class="mb-4" v-if="showTitle" />
        <div class="flex flex-row flex-wrap justify-center" v-for="_value in _list">
            <div class="w-1/2 md:w-1/4 text-center py-2 p-2" :class="{
                'pr-[6px]': i % 2 !== 0,
                'pl-[6px]': i % 2 === 0,
                'md:w-1/2!': colNum === 2,
                'md:w-1/3!': colNum === 3,
                'md:w-1/4!': colNum === 4,
                'md:w-1/5!': colNum === 5,
                'md:w-1/6!': colNum === 6,
            }" v-for="(item, i) in _value">
                <div class="w-full h-full" :class="{
                    'bg-white p-2 rounded-[12px] overflow-hidden': mode === 'card'
                }">
                    <a class="cms-link-wrapper h-full flex flex-col">
                        <div class="cms-img relative w-full">
                            <div class="image-content relative flex">
                                <img alt="Back view of a Velcro patch, showcasing the attachment option for versatile use."
                                    sizes="12.5vw" :src="item?.fileList?.[0] ?? (item || '')"
                                    class="max-w-[100%] w-full" v-img-auto="imgAuto" v-hover-pop />
                            </div>
                        </div>
                        <slot name="content" :item="item">
                            <div class="flex flex-col h-0 flex-1 mt-[6px]" v-if="showContent">
                                <div class="flex-1 h-0">
                                    <p class="text-sm font-bold">{{ item?.title }}</p>
                                    <div class="text-3 text-gray-500">{{ item?.value }}</div>
                                    <div class="text-3 text-gray-500">
                                        {{ item?.content }}
                                    </div>
                                </div>
                                <button v-if="item?.button_text"
                                    class=" text-black mt-2 mb-2  md:inline-block! bg-[#fff] text-[#000] rounded-2 px-5 py-2 text-base border-[1px] border-[#000] border-solid cursor-pointer w-full max-w-[260px] mx-auto hover:bg-[#1C498B] hover:text-[#fff]! hover:border-[#1C498B]">
                                    <span class="text-[14px]! md:hidden">{{ item?.button_text }}</span>
                                    <span class="hidden md:inline-block">{{ item?.button_text }}</span>
                                </button>
                            </div>
                        </slot>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Title } from '../Title';
const props = withDefaults(
    defineProps<{
        title?: string;
        content?: string;
        showContent?: boolean;
        num?: number;
        colNum?: number;
        showTitle?: boolean;
        imgAuto?: boolean | string;
        mode?: 'card' | 'list';
        list?: Record<string, string>[];
    }>(),
    {
        showContent: true,
        num: 10,
        colNum: 4,
        imgAuto: true,
        showTitle: true,
        list: [],
        mode: 'list'
    }
)
// 引入 img-vuer，安装插件
const _list = ref(splitIntoPairs(props.list ?? [], props.num))
const isShow = ref(false)
nextTick(() => {
    isShow.value = true
})
</script>